<template>

    <div class="d1">

        <el-button type="success" color="#d1edc4"> <el-icon style="margin-right: 5px;">
                <Plus />
            </el-icon>添加</el-button>
    </div>
    <div style="margin: 10px;">
        <el-table :data="tableData" border stripe style="width: 100%; margin-top: 20px;"
            @selection-change="handleSelectionChange">
            <!-- 添加选择框列 -->
            <el-table-column type="selection" width="55" />
            <el-table-column prop="date" label="序号" width="180" />
            <el-table-column prop="name" label="类型名称" width="180" />
            <el-table-column prop="address" label="描述" />
            <el-table-column prop="address" label="创建时间" />
            <el-table-column prop="address" label="更新时间" />
            <el-table-column prop="address" label="操作">
                <template #default="scope">
                    <a>修改</a>
                    <a>删除</a>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="demo-pagination-block">

        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
            :page-sizes="[100, 200, 300, 400]" :size="size" :disabled="disabled" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script setup>
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: '1',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: '1',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: '1',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: '1',
    },
]
</script>

<style scoped>
.d1 {
    border-radius: 3px;
    padding: 10px;
    margin: 10px;
    border: 1px solid #dedfe0;
}

.demo-pagination-block {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}
</style>